<script setup lang="ts">
import { ref } from "vue";
const flag = ref(false)
// import { useIntersectionObserver } from '@vueuse/core'
// const target = ref<null | HTMLImageElement>(null)


// const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
//     if (isIntersecting) {
//         console.log('进入视口');
//         target.value!.src = 'https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669050000&t=0d7453fbdb6cccf14f61d0171302a00c'
//         stop()
//     }
// })
</script>
<template>
    <button @click="flag = !flag">切换</button>
    <Transition>
        <div class="box" v-if="flag"></div>
    </Transition>

    <Transition name="test">
        <div class="box" v-if="flag"></div>
    </Transition>

    <Transition name="demo">
        <div class="box" v-if="flag"></div>
    </Transition>

</template>


<style scoped>
/* .box {
    height: 1500px;
} */

.box {
    width: 300px;
    height: 300px;
    background-color: pink;
}

.v-enter-from {
    opacity: 0;
}

.v-enter-active {
    transition: all 2s linear;
}

.v-enter-to {
    opacity: 1;
}

.v-leave-from {
    opacity: 1;
}

.v-leave-active {
    transition: all 2s linear;
}

.v-leave-to {
    opacity: 0
}

/* -------------------------------------- */

.test-enter-from {
    opacity: 0;
    width: 0;
    height: 0;
}

.test-enter-active {
    transition: all 2s linear;
}

.test-enter-to {
    opacity: 1;
    width: 300px;
    height: 300px;
}
</style>